<template>  
    <view class="container">  
		
		<view class="user-section">
			<view class="bg">
			</view>
			<!-- <image class="bg" src="../../static/qianbao2.png"></image> -->
			<image @click="navTo('/pageA/member/sign/sign')" style="width: 166upx;position: absolute;right: -10upx;top: 10upx;" src="../../static/qiandao.png" mode="widthFix"></image>
			<text @click="navTo('/pageA/member/sign/sign')" style="position: absolute;right: 11upx;top: 50upx;font-size: 18upx;color: #F9DFE0;">{{res.sign}}积分</text>
			<view class="user-info-box">
				<view class="portrait-box" @click="jump" data-src="/pageA/member/info/info">
					<image class="portrait" :src="res.avatar||'/static/missing-face.png'"></image>		
				</view>
				<view class="info-box">
					<view class="userid">
						ID:{{res.id||'当前用户无id'}}
					</view>
					<text class="username">{{res.nickname||'游客'}}</text>
					<!-- <text>{{res.id.name}}</text> -->
				</view>
				<view class="" style="margin-left: 220upx;display: flex;">
					<view style="display: flex;flex-direction: column;text-align: center;" @click="jump" data-src="../commission/all">
						<image style="width: 50upx;height:50upx;" src="../../static/message.png" mode=""></image>
						<text style="font-size: 20upx;">提现</text>
					</view>
					<view class="" @click="navTo('/pages/commission/qrcode/qrcode')" style="display: flex;flex-direction: column;margin-left: 20upx;text-align: center;">
						<image style="width: 50upx;height: 50upx;" src="../../static/set.png" mode=""></image>
						<text style="font-size: 20upx;">设置</text>
					</view>
				</view>
			</view>
			<view class="tj-sction" style="display: flex;flex-direction: column;position: absolute;width: 690upx;">
				<view class="" style="padding:10upx 30upx 0upx 30upx;margin-bottom: -20upx;">
					<view class="">
						<text>当前级别:</text>
						<text style="font-weight: bold;font-size: 34upx;margin: 0upx 15upx;">{{res.level_name}}</text>
						<!-- <text class="yticon icon-iLinkapp-" style="margin: 0upx 15upx;color: #D6A22D;"></text> -->
						<!-- <image style="width: 50upx;height: 50upx;margin: 0upx 20upx -10upx 20upx;" src="../../static/huangguan.png" mode=""></image> -->
						<!-- <text style="color: #7A5B13;">升级代理</text> -->
					</view>
					<view>
						<text style="color: #ADADAD;font-size: 22upx;">赶快邀请身边的小伙伴来注册吧!~~</text>
						 <!-- <progress :percent="percent1" activeColor='#8F8F8F' stroke-width='1' show-info /> -->
					</view>
				</view>
				<view style="display: flex;justify-content: space-around;">
				<view class="tj-item">
					<text style="color: #000;">余额 : 
					<text class="num" style="color: #7C2548;font-weight: 550" v-if="res.credit2">{{res.credit2}}</text></text>
				</view>
				<view class="tj-item" @click="navTo('/pageA/member/shopy/shopy')">
					<text style="color: #000;">收益 : 
					<text class="num" style="font-weight: 550" v-if="res.x_money">{{res.x_money}}</text></text>
				</view>
				<view class="tj-item">
					<text style="color: #000;">积分 : 
					<text class="num" style="font-weight: 550" v-if="res.credit1">{{res.credit1}}</text></text>
				</view>
				<view class="tj-item" @click="jump" data-src="../../pageA/member/details/bz">
					<text style="color: #000;">业绩 : 
					<text class="num" style="font-weight: 550" v-if="res.x_yeji">{{res.x_yeji}}</text></text>
				</view>
				</view>
			</view>
		</view>
		
		<view 	class="cover-container">
			<!-- <image class="arc" src="/static/arc.png"></image> -->
			
			
			<!-- 订单 -->
			<view class="order-section" style="display: flex;justify-content: space-between;margin-bottom: -40upx;padding:20upx;height: 100upx;margin-top: 255upx;">
			<view class=""  style="font-size: 40upx;font-weight: 550;">
				我的订单
			</view>
			<view style="font-size: 24upx;color: #908F8D;font-weight: 550;line-height: 70upx;" @click="navTo('/pages/order/order?index=0')" hover-class="common-hover"  :hover-stay-time="50">
				全部 >
			</view>
			</view>
			<view class="order-section" style="color:#000">
				<!-- <view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover"  :hover-stay-time="50">
					<text class="yticon icon-shouye"></text>
					<text>全部订单</text>
				</view> -->
				<view class="order-item" @click="navTo('/pages/order/order?index=1')"  hover-class="common-hover" :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/daifukuan.png" mode=""></image>
					<text>待付款</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?index=2')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/daifahuo.png" mode=""></image>
					<text>待发货</text>
				</view>
				
				<view class="order-item" @click="navTo('/pages/order/order?index=3')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/daishouhuo.png" mode=""></image>
					<text>待收货</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?index=4')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/daipingjia.png" mode=""></image>
					<text>已完成</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?index=5')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/shouhou.png" mode=""></image>
					<text>已取消</text>
				</view>
			</view>
			<!-- 浏览历史 -->
			<view class="history-section icon">
				<view class="" style="font-size: 40upx;font-weight: 550;padding:0upx 20upx 30upx;">
					我的服务
				</view>
				<view class=""  style="display: flex; flex-wrap: wrap;width: 690upx;height: 300upx;">
					<view class="" @click="navTo('/pageA/member/info/info')" style="margin-left: 50upx;">
						<image style=" margin-left: 35upx;display: block; width: 50upx;height: 50upx;" src="../../static/06.png" mode=""></image>
						<text>会员资料</text>
					</view>
					<view class="" @click="navTo('/pages/media/media')" style="margin-left: 50upx;">
						<image style="margin-left: 35upx;display: block; width: 50upx;height: 50upx;" src="../../static/07.png" mode=""></image>
						<text>新闻资讯</text>
					</view>
					<view class="" @click="navTo('/pageA/member/myterritory')" style="margin-left: 50upx;">
						<image style="margin-left: 35upx;display: block; width: 50upx;height: 50upx;" src="../../static/08.png" mode=""></image>
						<text>我的社区</text>
					</view>
					<view class="" @click="navTo('/pages/cart/cart')" style="margin-left: 50upx;"> 
						<image style="margin-left: 30upx;display: block; width: 50upx;height: 50upx;" src="../../static/09.png" mode=""></image>
						<text style="margin-left: 10upx;">购物车</text>
					</view>
					<view class="" @click="navTo('/pageA/member/history')" style="margin-left: 50upx;">
						<image style="margin-left: 35upx;display: block; width: 50upx;height: 50upx;" src="../../static/10.png" mode=""></image>
						<text>我的足迹</text>
					</view>
					<view class="" @click="navTo('/pages/commission/qrcode/invite_code')" style="margin-left: 50upx;">
						<image style="margin-left: 35upx;display: block; width: 50upx;height: 50upx;" src="../../static/11.png" mode=""></image>
						<text>专属海报</text>
					</view>
					<view class="" @click="navTo('/pageA/member/address/address')" style="margin-left: 50upx;">
						<image style="margin-left: 35upx;display: block; width: 50upx;height: 50upx;" src="../../static/12.png" mode=""></image>
						<text>地址管理</text>
					</view>
					<!-- <view class="" @click="navTo('/pagesA/user/huiyuan/huiyuan')" style="margin-left: 50upx;">
						<image style="margin-left: 25upx;display: block; width: 50upx;height: 50upx;" src="../../static/13.png" mode=""></image>
						<text>沉睡会员</text>
					</view> -->
					<!-- <view class="" @click="jumpno" style="margin-left: 50upx;">
						<image style="margin-left: 35upx;display: block; width: 50upx;height: 50upx;" src="../../static/14.png" mode=""></image>
						<text>我的客服</text>
					</view> -->
					<view style="margin-left: 50upx;margin-top: -6upx;">
						<button style="height: 100%;" open-type="contact">
							<image style="margin-left: 35upx;display: block; width: 50upx;height: 50upx;" src="../../static/14.png" mode=""></image>
							<text style="font-size: 30upx;">我的客服</text>
						</button>
					</view>
					<!-- <view class="" @click="navTo('/pagesA/user/bangzhu/bangzhu')" style="margin-left: 50upx;">
						<image style="margin-left: 25upx;display: block; width: 50upx;height: 50upx;" src="../../static/15.png" mode=""></image>
						<text>帮助中心</text> 
					</view> -->
				</view>
			</view>
		</view>
    </view>  
</template>  
<script>  
	import listCell from '@/components/mix-list-cell';
    import {  
        mapState 
    } from 'vuex';  
	let startY = 0, moveY = 0, pageAtTop = true;
    export default {
		components: {
			listCell
		},
		data(){
			return {
				user_id:'',
				token:'',
				timestamp:'',
				res:[],
				percent1:0,
				percent:'',
				integration:'',
				level_name:'',
				real_head_img:'',
				real_name:'',
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				openid:""
			}
		},
		// onLoad(){
		// 	uni.getStorage({
		// 		key: 'user_id',
		// 		success: (res) => {
		// 		 this.user_id = res.data
		// 		 this.setajax()
		// 		},
		// 	});
		// 	uni.getStorage({
		// 		key: 'timestamp',
		// 		success: (res) => {
		// 			this.timestamp = res.data
		// 		},
		// 		fail: () => {}
		// 	});
		// 	uni.getStorage({
		// 		key: 'token',
		// 		success: (res) => {
		// 			this.token = res.data
		// 		},
		// 		fail: () => {}
		// 	});
		// },
		onShow:function(){
		   uni.getStorage({
		    key: 'openid',
		    success: (res) => {
		     this.openid = res.data
		     this.setajax()
		    },
		    fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
		    }
		   });
		 },
		// onLoad(){
		// 	uni.getStorage({
		// 		key: 'openid',
		// 		success: (res) => {
		// 		 this.user_id = res.data
		// 		},
		// 	});
		// 	uni.getStorage({
		// 		key: 'timestamp',
		// 		success: (res) => {
		// 			this.timestamp = res.data
		// 		},
		// 		fail: () => {}
		// 	});
		// 	uni.getStorage({
		// 		key: 'token',
		// 		success: (res) => {
		// 			this.token = res.data
		// 		},
		// 		fail: () => {}
		// 	});
		// },
		computed: {
		// ...mapState(['hasLogin','userInfo'])
		},
		methods: {
			setajax(){
				console.log(this.openid)
				uni.request({
					url: 'https://bhh.ax1319.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member&app=1',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data: {'openid':this.openid},
					success: res => {
						this.res = res.data
						console.log(this.res)
						uni.setStorage({
							key: 'pid_father',
							data: res.data.id
						})
					},
					fail: () => {},
					complete: () => {}
				});
			},
			navTo(url){
				uni.navigateTo({  
					url
				})  
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			jumpno() {
				uni.showModal({
				title:'提示',
				content:'功能即将开放',
				showCancel: false,
				confirmColor:"#DD524D",
					success() {
						return
					}
				})
			},
			
			
    }  
	}
</script>
<style lang='scss'>
	button::after {
		border: none;
	}
	button {
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		line-height:inherit;
	}
	button {
		border-radius:0;
	}
	
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  border-radius: 10upx;
	}

	.user-section{
		height: 300upx;
		padding: 60upx 30upx 0upx 30upx;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			background-color: #63062B;
			/* opacity: .7; */
		}
	}
	.user-info-box{
		color: #fff;
		height: 170upx;
		display:flex;
		align-items:center;
		position:relative;
		z-index: 1;
		/* padding-top: 50upx; */
		.portrait{
			width: 130upx;
			height: 130upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.username{
			width: 300upx;
			/* color: $font-color-dark; */
			margin-left: 20upx;
		}
		.userid {
			margin-left: 20upx;
		}
	}

	.vip-card-box{
		display:flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;
		.card-bg{
			position:absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}
		.b-btn{
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}
		.tit{
			font-size: $font-base+2upx;
			color: #f7d680;
			margin-bottom: 28upx;
			.yticon{
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}
		.e-b{
			font-size: 12upx;
			color: #ADADAD;
			margin-top: 20upx;
		}
	}
	.cover-container{
		background: $page-color-base;
		margin-top: -180upx;
		padding: 0 30upx;
		position:relative;
		background: #f5f5f5;
		padding-bottom: 20upx;
		.arc{
			position:absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}
	.tj-sction{
		@extend %section;
		.tj-item{
			@extend %flex-center;
			/* flex-direction: column; */
			height: 90upx;
			font-size: $font-sm;
			color: #75787d;
		}
		.num{
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}
	.order-section{
		@extend %section;
		padding: 0upx 0upx 20upx 0upx;
		/* margin-top: 20upx; */
		.order-item{
			@extend %flex-center;
			width: 120upx;
			height: 100upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
			line-height: 1.2;
		}
		.yticon{
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}
		.icon-shouhoutuikuan{
			font-size:44upx;
		}
	}
	.history-section{
		padding: 30upx 0 0;
		margin-top: 30upx;
		background: #fff;
		border-radius:10upx;
		.sec-header{
			display:flex;
			/* align-items: center; */
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;
			.yticon{
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}
		.h-list{
			white-space: nowrap;
			padding: 30upx 30upx 0;
			image{
				display:inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}
	
</style>